import '../style.css'

export default function UseTasks() {
  return ( 
    <div className="relative use-task-container">
      <div className="use-bg-1 flex justify-center text-center z-0">
        <img src="/use-bg-1.png" alt="" className='z-0'/>
      </div>
      <div className="use-bg-2 absolute">
        <img src="/use-bg-2.png" alt="" />
      </div>
      <div className='use-container absolute '>
        <h2 className='text-center font-sans text-slate-800'>
          <p className='text-5xl font-bold  mt-28'>开始使用 Tasks</p>
          <p className='text-xl font-medium mt-6'>一起完成目标 让进步发生</p>
        </h2>
        <div className="flex justify-center text-center gap-3 mt-20">
          <button className="px-6 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-lg  transform hover:bg-blue-600 transition duration-300 ease-in-out">
            立即使用
          </button>
          <button className="px-6 py-2 text-blue-500 font-semibold rounded-lg shadow-lg transform hover:text-blue-600 transition duration-300 ease-in-out">
            预约演示
          </button>
        </div>
      </div>
    </div>
  );
}
